<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/1/17
  Time: 12:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用车管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
    <script>
        //一般直接写在一个js文件中
        layui.use(['layer', 'form','element','table','jquery'], function(){
            var layer = layui.layer
                ,form = layui.form
                ,element=layui.element
                ,table=layui.table
                ,$=layui.jquery
            // 初始化加载
            getList('#car', 1)
            // 监听tab切换 操作：文档 - 内置模块 - 常用元素操作 element - 监听tab切换
            element.on('tab(tab-all)', function (data) {
                // console.log(this);        // 当前Tab标题所在的原始DOM元素
                // console.log(data.index);  // 得到当前Tab的所在下标
                // console.log(data.elem);   // 得到当前的Tab大容器
                var status = $(this).attr('data-status')
                var position = '#car1'
                console.log(status);
                switch (status) {
                    case '1': position = '#car1'; break;
                    case '3': position = '#car'; break;
                    default: position = '#car1';
                }
                console.log(position);
                getList(position, status)
            })

            // 公共方法
            function getList(position, status = '') {
                if (status==3) {
                    table.render({
                        elem: position
                        , url: '${pageContext.request.contextPath}/selectCarByPage'
                        //, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        ,toolbar:"#toolbarDemo"
                        , cols: [[
                            {type:'checkbox',title: '选择'}
                            ,{ field: 'id', title: '编号',align:"center"}
                            , { field: 'plate_number', title: '车牌号',align:"center" }
                            , { field: 'type', title: '车型',align:"center" }
                            , { field: 'comment', title: '备注',align:"center" }
                            ,{title:"操作",templet:"#caoZuoTemplet",align:"center"}
                        ]]
                        , page: true
                    });
                }
                if (status==1) {

                }

            }
            //监听汽车管理表
            table.on('toolbar(carFilter)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                if (obj.event=="add") {

                    form.render(); //更新全部
                    $("#addform")[0].reset()//清空表单
                    //alert("ooo")
                    layer.open({
                        type: 1,
                        content: $('#addform')
                    })
                }
                /*监听添加工具栏======end*/
            });

            /*监听添加汽车申请工具栏*/
            form.on('submit(carSubmitFilter)', function(data){
                //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                $.ajax({
                    url:"${pageContext.request.contextPath}/insertCarApplyFor",
                    data:data.field,
                    success:function (data) {
                        if (data.isAdd) {
                            //关闭弹出框
                            layer.msg('添加成功')

                        }else {
                            layer.open({
                                content:"输入有误,请重新输入"
                            });
                        }
                    }

                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            /*监听添加工具栏======end*/

            /*监听添加汽车表工具栏*/
            form.on('submit(submitFilter)', function(data){
                //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                $.ajax({
                    url:"${pageContext.request.contextPath}/insertCar",
                    data:data.field,
                    success:function (data) {
                        if (data.isAdd) {
                            //关闭弹出框
                            layer.closeAll()
                            //重载table
                            table.reload('car');
                        }else {
                            layer.open({
                                content:"输入有误,请重新输入"
                            });
                        }
                    }

                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            /*监听添加工具栏======end*/


            //监听行工具栏
            table.on('tool(carFilter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                        $.ajax({
                            url:"${pageContext.request.contextPath}/deleteCar",
                            data:{"id":data.id}
                        })
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //console.log(data.departmentId)
                    //发送ajax根据id查对象
                    $.ajax({
                        url:"${pageContext.request.contextPath}/selectOneCar"
                        ,async:false
                        ,data:{"id":data.id}
                        ,success:function (da) {
                            //给表单赋值
                            // alert(data)
                            //console.log(da)

                            form.render()
                            form.val('updateFormFilter', da.car);

                        }
                    })
                    //form.render(); //更新全部
                    //弹出修改表单
                    layer.open({
                        type: 1,
                        content: $('#updateForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响

                    });


                }
            });
            /*//监听行工具栏=========end*/


            //监听修改状态修改表单内容
            form.on('submit(updateSubmitFilter)', function(data){
                /*console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}*/
                $.ajax({
                    url:"${pageContext.request.contextPath}/updateCar"
                    ,data:data.field
                    ,success:function (data) {
                        var msg="修改失败"
                        if (data.isUpdate) {
                            msg="修改成功"
                            layer.closeAll()
                            table.reload('car');
                        }
                        layer.msg(msg)
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });



    </script>


    <!--/*自定义行操作模板*/-->
    <script type="text/html" id="caoZuoTemplet">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <!--/*自定义头工具栏模板*/-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        </div>
    </script>


</head>
<body>



<div class="layui-tab" lay-filter="tab-all">
    <ul class="layui-tab-title">
        <li data-status="1" class="layui-this">用车申请</li>
        <li data-status="3">车辆信息管理</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <!--//添加表单-->
            <form class="layui-form"  id="carform" lay-filter="carFilter"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">车辆编号:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="car_id" lay-verify="required" placeholder="请输入车牌号"  class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">司机:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="driver" lay-verify="required" placeholder="请输入车型"  class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用车人:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="user" lay-verify="required" placeholder="请输入车型"  class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用车部门:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="department" lay-verify="required" placeholder="请输入车型"  class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">随行人员:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="retinue" lay-verify="required" placeholder="请输入车型"  class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">时间:</label>
                        <div class="layui-input-inline">
                            <input type="date" name="startdate"  class="layui-input">--
                            <input type="date" name="endtate"  class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">目的地:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="destination" lay-verify="required" placeholder="请输入车型"  class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">申请里程(公里):</label>
                        <div class="layui-input-inline">
                            <input type="text" name="mileage" lay-verify="required" placeholder="请输入车型"  class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">用车事由:</label>
                    <div class="layui-inline">
                        <textarea name="affair" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>
                <hr>
                <div class="layui-form-item">
                    <label class="layui-form-label">下一步审批人:</label>
                    <div class="layui-inline">
                        <select name="approver" lay-filter="type" id="type">
                            <option value="">请选择</option>
                            <option value="张三">张三</option>
                            <option value="李四">李四</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="carSubmitFilter">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
                <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
            </form>

        </div>
        <div class="layui-tab-item">
            <table id="car" lay-filter="carFilter"></table>
        </div>
    </div>
</div>

<!--//添加表单-->
<form class="layui-form" style="display: none;" id="addform" lay-filter="formFilter"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">车牌号:</label>
        <div class="layui-inline">
            <input type="text" name="plate_number" lay-verify="required" placeholder="请输入车牌号"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">车型:</label>
        <div class="layui-inline">
            <input type="text" name="type" lay-verify="required" placeholder="请输入车型"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注:</label>
        <div class="layui-inline">
            <textarea name="comment" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submitFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>


<!--//修改表单-->
<form class="layui-form" style="display: none;" id="updateForm" lay-filter="updateFormFilter"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->

    <div class="layui-form-item">
        <label class="layui-form-label">车牌号:</label>
        <div class="layui-inline">
            <input type="hidden" id="id"  name="id" value="">
            <input type="text" name="plate_number" lay-verify="required" placeholder="请输入车牌号"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">车型:</label>
        <div class="layui-inline">
            <input type="text" name="type" lay-verify="required" placeholder="请输入车型"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注:</label>
        <div class="layui-inline">
            <textarea name="comment" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateSubmitFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
</body>
</html>
